<template>
  <div class="container">
    <!-- order Information -->
    <el-descriptions
      title="order Information"
      :border="true"
      class="custom-descriptions"
      :column="4"
    >
      <!-- <el-descriptions-item label="ID">{{ tankInfo.id }}</el-descriptions-item> -->
      <el-descriptions-item label="订单号">{{
        tankInfo.orderNo
      }}</el-descriptions-item>
      <!-- 订单状态，0:未生厂;1:前混;2:后混 -->
      <el-descriptions-item label="订单状态">
        <span>{{
          tankInfo.orderStatus === 0
            ? "未生产"
            : tankInfo.orderStatus === 1
            ? "前混"
            : "后混"
        }}</span>
        <!-- <span
          class="status-dot"
          :class="getStatusClass(tankInfo.orderStatus)"
        ></span> -->
      </el-descriptions-item>
      <el-descriptions-item label="罐号">{{
        tankInfo.tank
      }}</el-descriptions-item>
      <el-descriptions-item label="生产缸重量"
        >{{ tankInfo.tankWeight }}KG</el-descriptions-item
      >
      <!-- 设备是否可用(0:可用;1:不可用) -->
      <el-descriptions-item label="罐状态">
        <span>{{ tankInfo.tankState === 0 ? "可用" : "不可用" }}</span>
        <span
          class="status-dot"
          :class="getStatusClass2(pwsStatus.tiaoseStatus)"
        ></span>
      </el-descriptions-item>
      <!-- <el-descriptions-item label="产线编号">{{
        tankInfo.lineNo
      }}</el-descriptions-item> -->
      <!-- <el-descriptions-item label="ID">{{ pwsTable.id }}</el-descriptions-item> -->
      <!-- <el-descriptions-item label="订单号">{{
        pwsTable.orderNo
      }}</el-descriptions-item> -->
      <el-descriptions-item label="批次号">{{
        pwsTable.batchNo
      }}</el-descriptions-item>
      <el-descriptions-item label="物料编号">{{
        pwsTable.matlNo
      }}</el-descriptions-item>
      <el-descriptions-item label="物料描述">{{
        pwsTable.matlDes
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="上次批次日期">{{
        pwsTable.lastbatchDate
      }}</el-descriptions-item>
      <el-descriptions-item label="上次批次号">{{
        pwsTable.lastbatchNo
      }}</el-descriptions-item>
      <el-descriptions-item label="上次生产版本">{{
        pwsTable.lastprodVer
      }}</el-descriptions-item> -->
      <!-- <el-descriptions-item label="产线ID">{{
        pwsTable.lineId
      }}</el-descriptions-item> -->
      <!-- <el-descriptions-item label="订单开始日期">{{
        pwsTable.orderStartDate
      }}</el-descriptions-item>
      <el-descriptions-item label="订单结束日期">{{
        pwsTable.orderEndDate
      }}</el-descriptions-item> -->
      <!-- <el-descriptions-item label="订单类型">{{
        pwsTable.orderType
      }}</el-descriptions-item> -->
      <el-descriptions-item label="数量">{{
        pwsTable.qty
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="配方编号">{{
        pwsTable.recipeNo
      }}</el-descriptions-item> -->
      <!-- <el-descriptions-item label="BOM版本">{{
        pwsTable.bomAlt
      }}</el-descriptions-item> -->
      <el-descriptions-item label="混合频率">{{
        tankInfo.mixFrequency
      }}</el-descriptions-item>

      <!-- <el-descriptions-item label="罐号">{{
        pwsTable.tankNo
      }}</el-descriptions-item> -->
      <!-- <el-descriptions-item label="创建时间">{{
        pwsTable.createTime
      }}</el-descriptions-item> -->
      <el-descriptions-item label="开始时间">{{
        pwsTable.startTime
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="结束时间">{{
        pwsTable.endTime
      }}</el-descriptions-item> -->
      <!-- <el-descriptions-item label="更新时间">{{
        pwsTable.updateTime
      }}</el-descriptions-item>
      <el-descriptions-item label="生产版本">{{
        pwsTable.productionVersion
      }}</el-descriptions-item> -->
      <el-descriptions-item label="操作人">{{
        pwsTable.workedBy
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="销售备注">{{
        pwsTable.salesNotes
      }}</el-descriptions-item>
      <el-descriptions-item label="特殊说明">{{
        pwsTable.specialInstruction
      }}</el-descriptions-item> -->
    </el-descriptions>

    <el-row v-if="sapDataList" style="width: 100%">
      <el-col :span="10" style="padding: 20px; border-right: 2px solid #ccc">
        <!-- left-webscoket -->
        <div
          class="device-box"
          style="background-image: url('/images/7K10K.jpg')"
        >
          <div class="name_lamp">
            <h3>7K</h3>
          </div>
          <p class="status_light">
            {{ $t("deviceDetails.deviceStatus") }}:
            <span
              class="status_light"
              v-if="T7K.T7K_FrequencyConverter_Running == true"
            >
              <i class="greenstatus"></i>
              {{ $t("deviceDetails.on") }}
            </span>
            <span
              class="status_light"
              v-if="T7K.T7K_FrequencyConverter_Running == false"
            >
              <i class="redstatus"></i>
              {{ $t("deviceDetails.off") }}
            </span>
          </p>
          <p>
            {{ $t("deviceDetails.batchNo") }}:
            {{ T7K.T7K_BatchNo }}
          </p>
          <p>
            {{ $t("deviceDetails.currentProductionNumber") }}:
            {{ T7K.T7K_PwsNo }}
          </p>
          <p>{{ $t("tasksheet.matlDes") }}: {{ T7K.T7K_MaterialName }}</p>
          <p>{{ $t("tasksheet.startTime") }}: {{ T7K.T7K_timestamp }}</p>
          <p>{{ $t("deviceDetails.bottleWeight") }}: {{ T7K.T7K_WEGT }} Kg</p>
          <p>
            {{ $t("deviceDetails.disperseFrequency") }}:
            {{ T7K.T7K_FrequencyActualValue }} Hz
          </p>
          <p>
            {{ $t("deviceDetails.speed") }}: {{ T7K.T7K_RSpeedActualValue }} RPM
          </p>
        </div>
      </el-col>
      <el-col :span="14" style="padding: 20px">
        <!-- right-表格 -->
        <el-scrollbar>
          <div>
            <el-table
              :data="sapDataList"
              height="60vh"
              border
              :header-cell-style="{ background: '#fafafa', color: '#333' }"
            >
              <el-table-column
                align="center"
                type="index"
                fixed="left"
                min-width="50"
              />
              <el-table-column
                align="center"
                prop="step"
                label="Seq.No"
                min-width="60"
              />
              <el-table-column
                prop="ingreDesc"
                align="left"
                label="Comp. No / Resource / Description / Instruction"
                min-width="300"
              >
                <template #default="scope">
                  <div v-if="scope.row.unit == 'KG'">
                    {{ scope.row.ingreNo }} {{ scope.row.ingreDesc }}
                  </div>
                  <div v-if="scope.row.unit == 'INS'">
                    {{ scope.row.remark }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="qty"
                align="center"
                label="QTY"
                min-width="50"
              />
              <el-table-column
                prop="unit"
                align="center"
                label="UoM"
                min-width="50"
              />
              <el-table-column
                prop="batch"
                align="center"
                label="Batch No"
                min-width="50"
              />
              <el-table-column
                prop="actualUsage"
                align="center"
                label="Actual Usage"
                min-width="60"
              />
            </el-table>
          </div>
        </el-scrollbar>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { apigetTankAndPwsAndSapData } from "@/api/home";

// 引入webscoket即可
import { ADS, tds, T3, T4, T7K, T10K } from "@/utils/webscoket";
const pwsStatus = ref({});
const pwsTable = ref({});
const sapDataList = ref([]);
const tankInfo = ref({});

const lineno = ref();
const route = useRoute();
onMounted(() => {
  if (route.query.lineNo) {
    lineno.value = route.query.lineNo;
    getfetchList(lineno.value);
  }
});

// 渲染列表方法
const getfetchList = async (lineno) => {
  await apigetTankAndPwsAndSapData(lineno)
    .then((res) => {
      if (res.code == 200) {
        pwsStatus.value = res.data.pwsStatus;
        pwsTable.value = res.data.pwsTable;
        sapDataList.value = res.data.sapDataList;
        tankInfo.value = res.data.tankInfo;
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const getStatusClass = (status) => {
  return status === 0
    ? "status-yellow"
    : status === 1
    ? "status-green"
    : "status-red";
};

const getStatusClass2 = (status) => {
  return status === 0 ? "status-green" : "status-red";
};
const getStatusClass3 = (status) => {
  console.log(778979, status);

  return status === 0 ? "status-red" : "status-green";
};
</script>

<style scoped>
/* .container {
  height: 100vh;
  background-image: url("/images/ADS.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
} */
.el-descriptions-item {
  font-size: 14px;
  color: #333;
}

.el-descriptions-item label {
  font-weight: bold;
  width: 150px;
  color: #666;
}

.el-descriptions {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.custom-descriptions {
  margin-bottom: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 8px;
}

.status-yellow {
  background-color: grey;
}

.status-green {
  background-color: green;
}

.status-red {
  background-color: red;
}

/* webscoket*/
.device-box {
  background-size: cover;
  background-position: center;
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-blend-mode: overlay;
  /* height: 400px; */
}

.device-box h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: bold;
}

/* webscoket-设备状态灯 */
.status_light {
  display: flex;
  align-items: center;
}
.greenstatus {
  margin: 0 5px;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: green;
}

.redstatus {
  margin: 0 5px;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: red;
}
</style>
